<!DOCTYPE html>
<html>
<head>
        <embed src="/static/ToTheMoon.mp3" hidden="true"
        autostart="true"
        loop="true">
        <style type="text/css">
            @charset "utf-8";
            body{
                background-image: url("images/bbbefb51f8198618b654e23e48ed2e738ad4e69a.jpg");
                background-size: cover;
            }
            img{
                width: 850px;
                height: 500px;
            }
            .photo{
                width: 900px;
                height: 550px;
                border: 1px solid #555555;
                margin: auto auto;
                position: relative;
                background: #ffffff;
                box-shadow: 0 10px 80px rgba(0,0,0,.6)
            }
            .photo input{
                display: none;
            }
            .image{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 800px;
                height: 450px;
                margin: 25px 25px;
                transform: scale(0);
                opacity: 0;
                transition: all 0.7s;
            }
            
            .nav label{
                width: 150px;
                height: 500px;
                margin: 25px 25px;
                position: absolute;
                z-index: 10;
                opacity: 0;
                display: none;  
                cursor: pointer;
                transition: opacity 0.2s;
                color: #ffffff;
                font-size: 50px;
                line-height: 450px;
                text-align: center;
                text-shadow: 0 0 15px #555555
            }
            .leftjianbian{
                background: linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -o-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -ms-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -moz-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -webkit-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
            }
            .rightjianbian{
                background: linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -o-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -ms-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -moz-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
                background: -webkit-linear-gradient(left , rgba(250, 242, 239,0) 10% , rgba(158, 148, 166,0.5) 100%);
            }
            .image:hover + .nav label{
                opacity: 0.5;
            }
            .nav label:hover{
                opacity: 1;
            }
            .nav .down{
                right: 0;
            }
            input:checked + .control .image{
                opacity: 1;
                transform: scale(1);
                transition: all 1s;
            }
            input:checked + .control .nav label{
                display: block;
            }
            .dots{
                width:100%;
                height: 20px;
                position: absolute;
                bottom: 30px;
                text-align: center;
            }
            .dot{
                width: 10px;
                height: 10px;
                margin: 0px 5px;
                border-radius: 50%;
                position: relative;
                display: inline-block;
                background: rgba(0,0,0,0.3);
            }
            input#img1:checked ~ .dots label#dot1,
            input#img2:checked ~ .dots label#dot2,
            input#img3:checked ~ .dots label#dot3,
            input#img4:checked ~ .dots label#dot4,
            input#img5:checked ~ .dots label#dot5,
            input#img6:checked ~ .dots label#dot6{
                background: rgba(0,0,0,0.7);
            }
            
                            *{
                margin: 0;
            }
            .page-header {
                padding: 20px 30px;
                overflow: hidden;
            }
            .page-header .brand{
                color: white;
                text-decoration: none;
                float: left;
            }
                        body {
                              background: linear-gradient(135deg, #3023AE, #C86DD7);
                              background-attachment: fixed;
                              font-size: 15px;
                             }
                             .panel {
                margin: 120px auto 60px;
                text-align: center;
                background-color: white;
                width: 500px;
                border-radius: 10px;  /* 圆角设置 */
                padding: 1px;
                transition: box-shadow .30s;
            }
            .panel:hover{
                box-shadow: #fff 5px 5px 25px;
            }
                            
            .avatar img {
                width: 120px;
                height: 120px;
                border-radius: 60px;
                margin-top: -60px;
            }
            .btn {
                color: white;
                background: rgb(48, 35, 174);
                font-size: 16px;
                line-height: 38px;
                height: 38px;
                padding: 0 20px;
                border-radius: 3px;
                display: inline-block;
                text-decoration: none;
                transition:15s;
            }
            .btn:hover {
                background-color: rgb(81, 67, 224);
            }
            .tags{
                margin-top: 50px;
                margin-bottom: 20px;
                color: #999;
            }
            .tag{
                margin: 0 15px;
            }
            .tag:before{
                content: '#'
            }
            .file-box {
    position: relative;
    display: inline-block;
}
.file-box img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: -30px;
    left: 0;
    display: inline-block;
    border: none;
}
.file-box .txt,.file-box .file {
    width: 70px;
    height: 36px;
    position: absolute;
    top: -20px;
    left: 100px;
    text-align: center;
}
</style>
</head>
<body>
      <div>
            <form method="post" action="http://10.100.50.247:5000/up_file" enctype="multipart/form-data">
            <input type="file" size="30" name="photo"/>
            <br>
            <input type="text" class="txt_input" name="name" style="margin-top:15px;"/>
            <input type="submit" value="提交信息" class="button-new" style="margin-top:15px;"/>
            </form>
      </div>
      <section class="panel">
            <p class="avatar">
              <img src="/static/img/AJdog.jpg" alt="">
            </p>
            <h3>真假看看看</h3>
            <p class="lead">致力于AJ球鞋鉴别</p>
            <p>
              <a class="btn" href="https://gitee.com/hu_jingrui/zhenjiakankankan">
                <i class="fa fa-bars"></i> 欢迎在码云为我们提出建议或意见
              </a>
            </p>
            {% if id == 1 %}
            <p>上传成功<p>
            {% endif %}
            {% if ans %}
            <p>{{ans}}<p>
            {% endif %}
            <p class="tags">
              <span class="tag">AJ</span>
              <span class="tag"> Distinguish</span>
              <span class="tag"> Open</span>
            </p>
          </section>
          <div class="photo" id="photo">
                <!--//1-->
                <input type="radio" name="btn" id="img1" checked/>
                <div class="control">
                    <div class="image"><img src="/static/img/1AJ.jpg"/></div>
                    <div class="nav">
                        <label for="img6" class="up leftjianbian"></label>
                        <label for="img2" class="down rightjianbian">></label>
                    </div>
                </div>
                <!--//2-->
                <input type="radio" name="btn" id="img2"/>
                <div class="control">
                    <div class="image"><img src="/static/img/2AJ.jpg"/></div>
                    <div class="nav">
                        <label for="img1" class="up leftjianbian"></label>
                        <label for="img3" class="down rightjianbian">></label>
                    </div>
                </div>
                <!--//3-->
                <input type="radio" name="btn" id="img3"/>
                <div class="control">
                    <div class="image"><img src="/static/img/3AJ.jpg"/></div>
                    <div class="nav">
                        <label for="img2" class="up leftjianbian"></label>
                        <label for="img4" class="down rightjianbian">></label>
                    </div>
                </div>
                <!--//4-->
                <input type="radio" name="btn" id="img4"/>
                <div class="control">
                    <div class="image"><img src="/static/img/4AJ.jpg"/></div>
                    <div class="nav">
                        <label for="img3" class="up leftjianbian"></label>
                        <label for="img5" class="down rightjianbian">></label>
                    </div>
                </div>
                <!--//5-->
                <input type="radio" name="btn" id="img5"/>
                <div class="control">
                    <div class="image"><img src="/static/img/5AJ.jpg"/></div>
                    <div class="nav">
                        <label for="img4" class="up leftjianbian"></label>
                        <label for="img6" class="down rightjianbian">></label>
                    </div>
                </div>
                <!--//6-->
                <input type="radio" name="btn" id="img6"/>
                <div class="control">
                    <div class="image"><img src="/static/img/6AJ.jpg"/></div>
                    <div class="nav">
                        <label for="img5" class="up leftjianbian"></label>
                        <label for="img1" class="down rightjianbian">></label>
                    </div>
                </div>
                <div class="dots">
                    <label for="img1" class="dot" id="dot1"></label>
                    <label for="img2" class="dot" id="dot2"></label>
                    <label for="img3" class="dot" id="dot3"></label>
                    <label for="img4" class="dot" id="dot4"></label>
                    <label for="img5" class="dot" id="dot5"></label>
                    <label for="img6" class="dot" id="dot6"></label>
                </div>
            </div>
</body>
</html>
